import React, {Component} from 'react';
import {Alert, ScrollView, StyleSheet} from 'react-native';
import {View, ActionBar, Text} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

export default class ActionBarScreen extends Component {
  render() {
    return (
      <ScrollView>
        <TestSuite name="ActionBar">
          
          <TestCase itShould="keepRelative">
            <View>
              <Text marginB-5>keepRelative={true} (默认: 相对定位)</Text>
              <View style={{height: 100, backgroundColor: '#e0e0e0', marginBottom: 10, borderWidth: 1, borderColor: '#ccc'}}>
                <Text center marginT-10>Top Content</Text>
                <ActionBar
                  keepRelative={true}
                  style={{backgroundColor: 'teal'}}
                  actions={[{label: 'Relative', color: 'white'}]}
                />
                <Text center marginT-10>Bottom Content</Text>
              </View>

              <Text marginB-5>keepRelative={false} (绝对定位吸底)</Text>
              <View style={{height: 100, backgroundColor: '#f0f0f0', position: 'relative', overflow: 'hidden', borderWidth: 1, borderColor: '#ccc'}}>
                <Text center marginT-10>Content Covered by ActionBar</Text>
                <Text center marginT-10>Content Covered by ActionBar</Text>
                <ActionBar
                  keepRelative={false}
                  style={{backgroundColor: 'purple'}}
                  actions={[{label: 'Absolute', color: 'white'}]}
                />
              </View>
            </View>
          </TestCase>

          <TestCase itShould="style">
            <View padding-10 centerH>
              <Text marginB-5>Custom Border & Width</Text>
              <ActionBar
                keepRelative
                style={{width: '80%', borderStyle: 'dashed', borderWidth: 2, borderColor: 'red'}}
                actions={[{label: 'Styled Bar'}]}
              />
            </View>
          </TestCase>

          <TestCase itShould="actions">
            <View padding-10 centerH>
              <ActionBar
                keepRelative
                style={{width: '100%'}}
                actions={[
                  {label: 'Normal'},
                  {label: 'Disabled', disabled: true, disabledColor: 'gray'},
                  {label: 'Bold Red', labelStyle: {fontWeight: 'bold', color: 'red'}},
                ]}
              />
            </View>
          </TestCase>

          <TestCase
            itShould="backgroundColor"
            initialState={false}
            arrange={({setState}) => (
              <View padding-10 centerH>
                <ActionBar
                  keepRelative
                  backgroundColor={'green'}
                  style={{width: '100%'}}
                  actions={[
                    {
                      label: 'Click for Alert',
                      color: 'white',
                      onPress: () => {
                        Alert.alert('Pressed');
                        setState(true);
                      }
                    }
                  ]}
                />
              </View>
            )}
            assert={({state, expect}) => {
              expect(state).to.be.true;
            }}
          />

          <TestCase itShould="centered">
            <View padding-10 centerH>
              <Text marginB-5>centered={true} (Items clustered in center)</Text>
              <ActionBar
                keepRelative
                centered={true}
                backgroundColor={'gray'}
                style={{width: '100%'}}
                actions={[
                  {label: 'Item 1', color: 'white'},
                  {label: 'Item 2', color: 'white'},
                  {label: 'Item 3', color: 'white'}
                ]}
              />
              <Text marginT-10 marginB-5>centered={false} (Items spread out/start)</Text>
              <ActionBar
                keepRelative
                centered={false}
                backgroundColor={'gray'}
                style={{width: '100%'}}
                actions={[
                  {label: 'Item 1', color: 'white'},
                  {label: 'Item 2', color: 'white'},
                  {label: 'Item 3', color: 'white'}
                ]}
              />
            </View>
          </TestCase>

          <TestCase itShould="height">
            <View padding-10 centerH>
              <Text marginB-5>height={80}</Text>
              <ActionBar
                keepRelative
                height={80}
                backgroundColor={'orange'}
                style={{width: '100%'}}
                actions={[{label: 'Height 80', color: 'black'}]}
              />
            </View>
          </TestCase>

          <TestCase itShould="useSafeArea">
            <View padding-10>
              <Text marginB-5>Note: Effect depends on device physical insets</Text>
              
              <Text marginB-5>useSafeArea={true}</Text>
              <View style={{borderWidth: 1, borderColor: '#ccc', marginBottom: 10}}>
                <ActionBar
                  keepRelative={true}
                  useSafeArea={false}
                  backgroundColor={'blue'}
                  style={{width: '100%'}}
                  actions={[{label: 'Safe Area On', color: 'white'}]}
                />
              </View>
              
              <Text marginB-5>useSafeArea={false}</Text>
              <View style={{borderWidth: 1, borderColor: '#ccc'}}>
                <ActionBar
                  keepRelative={true}
                  useSafeArea={true}
                  backgroundColor={'blue'}
                  style={{width: '100%'}}
                  actions={[{label: 'Safe Area Off', color: 'white'}]}
                />
              </View>
            </View>
          </TestCase>

        </TestSuite>
      </ScrollView>
    );
  }
}